<template>
    <div class="commentDetail_page">
        <div :class="[commentDialog?'active': '', 'dialog']">
            <div class="stance"></div>
            <div class="comment slideInUp animated">
                <h3 class="cont_title">回复<img src="~img/close.png" alt="" @click="handleClose"></h3>
                <div class="box">
                        <van-list v-model="loading" :finished="finished" finished-text="-我可是有底线的 0.0-" @load="loadMore" :offset="50">
                    <div class="dialog_comment" v-if="commentDetail">
                        <div class="reply_pic">
                            <img class="avatar" v-if="commentDetail.user.avatar" :src="commentDetail.user.avatar" alt="">
                            <i class="grade" v-if="commentDetail.user.userType==1"><img src="~img/v_blue@2x.png" alt=""></i>
                            <i class="grade" v-if="commentDetail.user.userType==2"><img src="~img/v_yellow@2x.png" alt=""></i>
                        </div>
                        <div class="reply_content">
                            <div class="line1">
                                <span>{{commentDetail.user.nickName}}</span>
                                <div class="tag_box">
                                    <img class="tag tagImg" v-if="tag(1,commentDetail)" src="~img/guan.png" alt="">
                                    <img class="tag tagImg" v-if="tag(0,commentDetail)" src="~img/zheng.png" alt="">
                                    <img class="tag tagImg" v-if="tag(2,commentDetail)" src="~img/jiao.png" alt="">
                                </div>
                                <span class="time">{{commentDetail.createAt}}</span>
                            </div>
                            <p class="line2">{{commentDetail.content}}</p>
                        </div>
                    </div>
                    <div class="replay_scroll" v-if="replyList.length>0" >
                            <ul class="reply2">
                                <li v-for="(item, index) in replyList" :key="index">
                                    <div class="reply_pic">
                                        <img class="avatar" v-if="item.user.avatar" :src="item.user.avatar" alt="">
                                        <i class="grade" v-if="item.user.userType==1"><img src="~img/v_blue@2x.png" alt=""></i>
                                        <i class="grade" v-if="item.user.userType==2"><img src="~img/v_yellow@2x.png" alt=""></i>
                                    </div>
                                    <div class="reply_content">
                                        <div class="line1">
                                            <span>{{item.user.nickName}}</span>
                                            <div class="tag_box">
                                                <img class="tag tagImg" v-if="tag(1,item)" src="~img/guan.png" alt="">
                                                <img class="tag tagImg" v-if="tag(0,item)" src="~img/zheng.png" alt="">
                                                <img class="tag tagImg" v-if="tag(2,item)" src="~img/jiao.png" alt="">
                                            </div>
                                            <span class="time">{{item.createAt}}</span>
                                        </div>
                                        <p class="line2">{{item.content}}</p>
                                        <div class="cont">
                                            <img src="~img/dianzan.png" alt=""><span>{{item.likeNum}}</span>
                                            <!-- <img src="~img/huifu.png" alt=""><span>339</span> -->
                                        </div>
                                    </div>
                                </li>
                            </ul>
                    </div>
                    </van-list>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { List } from 'vant';
Vue.use(List);

export default {
    props: {
        commentDialog: {
            type: Boolean,
            default: true
        },
        commentId:{
            type: [Number,String],
            required:true
        }
    },
    data() {
        return {
            commentDetail: null,
            currentPage: 1,
            replyList:[],
            loadingReplay: false,
            finished: false,
            loading: false
        }
    },
    created() {
        this.queryData()
        this.queryCommentList()
    },
    methods: {
        tag(key,item) {
            let tags = item.user.tag||[],flog= false
            for (let index = 0; index < tags.length; index++) {
                if(key == tags[index]){
                    flog = true
                }
            }
            return flog
        },
        queryData() {
            let param = {
                commentId: this.commentId
            }
            this.$http.post('V8/comments/getCommentDetail',{data:param})
            .then(res=>{
                let data = res.data
                this.commentDetail = data||{}
            })
            .catch(err=>{
            console.log(err)
            })
        },
        queryCommentList() {
            // this.loadingReplay = true
            if(this.finished) return
            this.loading = true
            let param = {
                commentId: this.commentId,
                currentPage: this.currentPage,
                pagePerNum: 15
            }
            this.$http.post('V8/comments/replyList',{data:param})
            .then(res=>{
                let data = res.data
                 data.forEach(element => {
                    this.replyList.push(element)
                });
                if(data.length){
                    this.loading = false
                }else{
                    this.finished = true;
                    this.loading = false
                    return
                }
                this.currentPage++
            })
            .catch(err=>{
                console.log(err)
            })
        },
        handleClose() {
            this.$emit('handleClose', false)
        },
        loadMore() {
            this.queryCommentList()
        }
    },
    deactivated () {
        this.$destroy(true)
        
    },
}
</script>

<style lang="scss">
    @import 'styles/variables.scss';
    @import 'styles/mixin.scss';
      .dialog{
            display: none;
            position: fixed;
            top:0px;
            bottom:1.00rem;
            right:0px;
            left:0px;
            background: rgba(0,0,0,0.2);
            z-index: 100;
            .stance{
                height: 3%;
            }
            .comment{
                position: relative;
                padding:0.30rem 0rem 0rem;
                height: 97%;
                background:$white;
                // border-radius: 0.60rem;
                border-top-left-radius: 0.60rem;
                border-top-right-radius: 0.60rem;
                overflow: hidden;
                .cont_title{
                    padding: 0px 0.32rem;
                    width: 100%;
                    font-size: 0.36rem;
                    font-weight: 500;
                    line-height: 0.36rem;
                    text-align: center;
                    img{
                        display: block;
                        width: 0.40rem;
                        float: right;
                    }
                }
                .box{
                    position: absolute;
                    top: 0.66rem;
                    bottom: 0rem;
                    left: 0px; 
                    right: 0px;
                    overflow: auto;
                    .van-list__finished-text{
                        background: #F7f7f7;
                    }
                    .dialog_comment{
                        width: 100%;
                        display: flex;
                        padding: 0.44rem 0.32rem 0.30rem;
                        .reply_pic{
                            min-width: 0.68rem;
                            max-width: 0.68rem;
                            width: 0.68rem;
                            height: 0.68rem;
                            margin-right: 0.18rem; 
                            position: relative;
                            .avatar{
                                border-radius: 100%;
                                display: block;
                                margin: 0 auto;
                                height: 100%;
                                width: 100%;
                            }
                            .grade{
                                position: absolute;
                                display: block;
                                width: 0.26rem;
                                height: 0.26rem;
                                right: 0rem;
                                bottom: 0rem;
                                img{
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                } 
                            }
                        }
                        .reply_content{
                            width:100%;
                            .line1{
                                height: 0.68rem;
                                width: 100%;
                                font-size: 0.28rem;
                                font-weight: 400;
                                line-height: 0.68rem;
                                span{
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                                .time{
                                    float: right;
                                    font-size: 0.24rem;
                                    color: #bbbbbb;
                                }
                                .tag_box{
                                    display: inline-block;
                                    overflow: hidden;
                                    vertical-align: middle;
                                    .tag{
                                        display: block;
                                        float: left;
                                        padding:0px;
                                        width: 0.44rem;
                                        margin-left: 0.12rem;
                                    }
                                }
                            }
                            .line2{
                                margin-top: 0.20rem;
                                font-size: 0.32rem;
                                font-weight: 400;
                                line-height: 0.48rem;
                            }
                            
                        }
                    }
                    .replay_scroll{
                        background-color: #F7F7F7;
                        padding-bottom: 0.30rem;
                        .reply2{
                            height: auto;
                            padding: 0.26rem 0.30rem 0rem;
                            &>li{
                                display: flex;
                                .reply_pic{
                                    width: 0.68rem;
                                    height: 0.68rem;
                                    margin-right: 0.18rem; 
                                    position: relative;
                                    .avatar{
                                        border-radius: 50%;
                                        display: block;
                                        width: 0.68rem;
                                        height: 0.68rem;
                                    }
                                    .grade{
                                        position: absolute;
                                        display: block;
                                        width: 0.26rem;
                                        height: 0.26rem;
                                        right: 0rem;
                                        bottom: 0rem;
                                        img{
                                            display: block;
                                            width: 100%;
                                            height: 100%;
                                        } 
                                    }
                                }
                                .reply_content{
                                    width:100%;
                                    .line1{
                                        height: 0.68rem;
                                        width: 100%;
                                        font-size: 0.28rem;
                                        font-weight: 400;
                                        line-height: 0.68rem;
                                        span{
                                            display: inline-block;
                                            vertical-align: middle;
                                        }
                                        .tag_box{
                                            display: inline-block;
                                            overflow: hidden;
                                            vertical-align: middle;
                                            .tag{
                                                display: block;
                                                float: left;
                                                padding:0px;
                                                width: 0.44rem;
                                                margin-left: 0.12rem;
                                            }
                                        }
                                        .time{
                                            float: right;
                                            font-size: 0.24rem;
                                            color: #bbbbbb;
                                        }
                                    }
                                    .line2{
                                        margin-top: 0.20rem;
                                        font-size: 0.32rem;
                                        font-weight: 400;
                                        line-height: 0.48rem;
                                    }
                                    .cont{
                                        margin-top: 0.24rem;
                                        line-height: 0.48rem;
                                        span{
                                            vertical-align: top;
                                            margin-left: 0.08rem;
                                            margin-right: 0.80rem;
                                            display: inline-block;
                                            font-size: 0.24rem;
                                            font-weight: 400;
                                            color: $gray;
                                        }
                                        img{
                                            display: inline-block;
                                            vertical-align: top;
                                            width: 0.48rem;
                                            height: 0.48rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

            }
            &.active{
                display: block;
            }
      }
</style>
